<template>
	<view>
		
		<cu-custom  :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		
		<view class="editWork-con">
			<view class="work-dbsx-title">
				<text class="title-border"></text>
				<text class="" style="color: #000;font-size: 26rpx;">
					修改时间
				</text>
			</view>
			<view class="editWork-con-ul box">
				<view class="editWork-con-li">
					<text class="textcolor">工单内容：</text>
					<text>{{ data.name }}</text>
				</view>
				<view class="editWork-con-li">
					<text class="textcolor">客户姓名：</text>
					<text>{{ data.addresseeName }}</text>
				</view>
				<view class="editWork-con-li">
					<text class="textcolor">订单地址：</text>
					<text>{{ data.detailAddress }}</text>
				</view>
				<view class="editWork-con-li">
					<text class="textcolor">下单时间：</text>
					<text>{{ data.createTime }}</text>
				</view>
				<view class="editWork-con-li">
					<text class="textcolor">联系方式：</text>
					<text>{{ data.telephone }}</text>
				</view>
				<view class="editWork-con-li">
					<text class="textcolor">预约时间：</text>
					<text v-if="!editTiemValue">{{ data.appointmentTime }}</text>
					<text v-else>{{ year + '- '+ editTiemValue }}</text>
					<image @tap="editTiem" class="imgStyle" :src="editTiemValue ? imgSrcHover : imgSrc" mode=""></image>
				</view>
			</view>
			
			<view class="editBtn-con">
				<text class="btn-qix btndefa" @tap="editQx">取消工单</text>
				<text class="btn-qr btndefa" @tap="editQr">确认修改</text>
			</view>
			
		</view>
		
		<u-picker mode="time" v-model="show" :params="params" @confirm="tiemConfirm"></u-picker>
		
		<u-toast ref="uToast" />
		
		<u-modal v-model="showStatus" :content="content" :show-cancel-button="true" @confirm="shoWconfirm" ></u-modal>
	</view>
</template>

<script>
	import { getSkillCancellation,getSkillEditTiem,getSkillWorkOrderId} from '@/api/skill.js'
	export default {
		data() {
			return {
				pageDesign:{
					pageName : '修改工单'
				},
				year:'',
				list:'',
				data:'',
				id:'',
				content: '您确定要取消吗该工单吗?',
				showStatus: false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				imgSrc:'/static/image/ico/edit.png',
				imgSrcHover:'/static/image/ico/redEdit.png',
				show: false,
				editTiemValue:''
			};
		},
		onShow() {
			this.getWorkOrderId(this.list.id)
		},
		onLoad(option) {
			this.list = JSON.parse(option.data)
		},
		methods:{
			editTiem(){
				this.show = true
			},
			//时间
			tiemConfirm(e) {
			  const { day, hour, minute, month } = e;
			  // 获取当前年份
			  this.year = new Date().getFullYear();
			  
			  this.editTiemValue = `${month}-${day} ${hour}:${minute}`;
			  
			  console.log(this.editTiemValue)
			},
			//取消工单
			editQx(){
				this.showStatus = true
				
			},
			//确认修改
			editQr(){
				this.getEditTiem({
					id:this.data.id,
					appointmentTime:this.editTiemValue
				})
				
			},
			shoWconfirm(){
				 this.getCancellation({
				 	id : this.data.id
				 })
			},
			// 取消工单
			async getCancellation (requestData){
				const { data } = await getSkillCancellation(requestData)
				if(data){
					// this.$refs.uToast.show({
					// 	title: data,
					// 	type: 'success',
					// })
					uni.navigateBack({
						delta: 1,
						success() {
							uni.setStorageSync('previousPath', '/subpkg/skill/editWork/editWork');
						}
					});
				}
				console.log(data)
			},
			async getEditTiem(requestTiem){
				const { data,ok } = await getSkillEditTiem(requestTiem)
				if(ok){
					this.getWorkOrderId(this.list.id)
					uni.setStorageSync('previousPath', '/subpkg/skill/editWork/editWork');
				}
				console.log(data)
			},
			async getWorkOrderId(id){
				const { data } = await getSkillWorkOrderId(id)
				this.data = data
				console.log(data)
			}
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.bgLiner{
	background: #fff;
	color: #000;
}
::v-deep .u-picker-body{
	width: 60% !important;
	margin: 0 auto;
}
.box{
	width: 95%;
	// height: 392rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 19rpx 0rpx rgba(0,0,0,0.07);
	border-radius: 18rpx;
	margin: 0 auto;
	padding: 25.78rpx  26.41rpx  39.84rpx;
	.editWork-con-li{
		color: #000;
		margin-bottom: 37.5rpx;
		font-size: 26rpx;
		position: relative;
		.imgStyle{
			width: 15px;
			height: 15px;
			position: absolute;
			right: 0px;
			top: 4px;
		}
		.textcolor{
			color:#7C808E;
		}
		&:last-child{
			margin-bottom: 0;
		}
	}
}
.editBtn-con{
	width: 90%;
	position: fixed;
	bottom: 67.97rpx;
	display: flex;
	left: 50%;
	transform: translateX(-50%);
	justify-content: space-between;
	.btndefa{
		letter-spacing: 1px;
		width: 45%;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 42rpx;
		font-size: 28rpx;
	}
	.btn-qix{
		background: #F5F5F5;
		border: 1px solid #18b1bb;
		color: #18b1bb;
	}
	.btn-qr{
		background: #18b1bb;
		border: 1px solid #18b1bb;
		color: #fff;
	}
}
.work-dbsx-title{
	width: 95%;
	margin: 0 auto;
	display: flex;
	padding: 15px 0;
	color: #000;
	font-size: 28.12rpx;
	align-items: center;
	font-weight: 400;
}
.title-border::before {
	content: "";
	display:block;
	width: 6rpx;
	height: 30rpx;
	background: #18b1bb;
	margin-right: 15rpx;
}
</style>
